<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			.div4 {
				width: 41%;
				height: 300px;
				background: yellow;
			}
		</style>
		<script>
			function setcolor1(color) {
				var adiv = document.getElementById('div1')
				adiv.style.background = color;
			}

			function setstyle(name, value) {
				var bdiv = document.getElementById('div2')
				bdiv.style[name] = value
			}

			function t1(name) {
				var a = name
				var t = document.getElementById('text1')
				t[a] = '两个小孩儿打灰机'
			}

			function tostyle() {
				var ddiv = document.getElementById('div4')
				ddiv.className = 'div4 box boxre'
			}

			function say() {
				var a = 'Sorry，我还没学（︶︿︶)';
				alert(a);
			}
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re">
			1、函数传参 一个参数 <br>
			<p><button type="button" onclick="setcolor1('yellow');">背景变黄</button> <button type="button" onclick="setcolor1('red');">背景变红</button> <button type="button" onclick="setcolor1('black');">背景变黑</button> <button type="button" onclick="say('title');">恢复原样</button></p>
			<p>定义函数的参数为color，变量adiv的样式调用参数color，onclick事件把背景颜色的值传给参数color。</p>
		</div>

		<div id="div2" class="box box-re">
			2、函数传参 两个参数 <br>
			<p><button type="button" onclick="setstyle('width','41%');">背景变窄</button> <button type="button" onclick="setstyle('background','yellow');">背景变黄</button> <button type="button" onclick="setstyle('height','300px');">背景变高</button> <button type="button" onclick="say();">恢复原样</button></p>
			<p>定义函数的参数为name和value，变量bdiv的样式的属性名用参数name代替，属性值用参数value代替，onclick事件把样式的属性名和值分别传给参数name和value。</p>
		</div>

		<div id="div3" class="box box-re">
			3、函数传参 参数加变量<br>
			<p><input id="text1" type="text" value="你拍一 我拍一" />
				<button type="button" onclick="t1('value')">改变文字</button> <button type="button" onclick="t1('title')">添加title属性(鼠标经过)</button></p>
			<p>定义函数的参数为name，定义变量a为参数name，两个onclick事件分别绑定标签属性调用参数的值。(暂时不知道为什么要把参数定义成变量，但是这样也行的通。)</p>
		</div>

		<div id="div4" class="box box-re">
			4、修改样式 通过调取className<br>
			<p><button type="button" onclick="tostyle()">变红 变高 变窄</button> <button type="button" onclick="say();">恢复原样</button></p>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>函数传参：</b>参数就是占位符</p>
			<p><b>方括号操作属性：</b>当要修改的属性不固定的时候，就用方括号来操作。只要是可以用.的地方，都可以用方括号来表示。</p>
			<p>通过style，操作的只能是行间样式。无论是读还是写。</p>
			<p>样式的优先级：*（通配符）标签 class Id 行间，如果先修改了行间，再修改class就会失败。因为优先级。所以对于一个元素，要么只修改行间，要么只修改class，不能混着来。</p>

		</div>

	</BODY>

</HTML>